<template>
  <div>
    <el-card class="cardbox" shadow="always">
      <div class="cardcontent clearfix">
        <div class="cardleft">
          <div class="cardleftyuan" style="background: #5BD171;">
            <svg-icon icon-class="hometu" style="font-size: 24px;color: #ffffff"></svg-icon>
          </div>
        </div>
        <div class="cardright">
          <p class="cardtit">SIM卡绑定列表</p>
          <div class="carddes">SIM卡绑定列表。</div>
        </div>
      </div>
      <div class="cardfooter">
        <el-button class="footerbtn" type="text" @click="opendialog()">查询</el-button>
      </div>
    </el-card>
    <el-dialog title="SIM卡绑定列表"
               :visible.sync="dialog"
               :close-on-click-modal="false"
               width="70%"
               top="50px">
      <el-form ref="QueryForm" :model="QueryForm">
        <div class="clearfix">
          <el-form-item label="" style="width: 530px;float: left">
            <el-date-picker
                style="float: left;width: 45%"
                v-model="QueryForm.start_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                type="datetime"
                placeholder="请选择开始时间">
            </el-date-picker>
            <div style="float: left;margin: 0 2.5%">至</div>
            <el-date-picker
                style="float: left;width: 45%"
                v-model="QueryForm.end_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                type="datetime"
                placeholder="请选择结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" style="float: left">
            <el-switch
                v-model="QueryForm.all_handle_mch"
                active-text="已处理"
                inactive-text="未处理">
            </el-switch>
          </el-form-item>
          <el-button style="float: left;margin-left: 15px" type="primary" icon="el-icon-search" @click="Query(true)">
            查询
          </el-button>
          <el-button style="float: left" type="primary" @click="exceldown">导出</el-button>
        </div>
      </el-form>
      <el-table v-loading="Loading"
                element-loading-text="加载中"
                header-cell-class-name="tableheader"
                :data="list"
                border
                fit>
        <el-table-column label="用户账号" prop="user_name"></el-table-column>
        <el-table-column label="客户姓名" prop="u_name"></el-table-column>
        <el-table-column label="机器名称" prop="mch_name"></el-table-column>
        <el-table-column label="iccid" prop="iccid"></el-table-column>
        <el-table-column label="省" prop="province"></el-table-column>
        <el-table-column label="市" prop="city"></el-table-column>
        <el-table-column label="区" prop="district"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="下载时间" prop="update_time"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            style="text-align: center"
            layout="prev, pager, next"
            small
            :current-page="QueryForm.page"
            :page-size="QueryForm.pagesize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      QueryForm: {
        start_time: '',
        end_time: '',
        all_handle_mch: false,
        isPage: true,
        page: 1,
        pagesize: 15,
      },
      list: [],
      total: 0,
      Loading: false,
      dialog: false,
    };
  },
  methods: {
    opendialog() {
      this.dialog = true;
      this.Query(true)
    },
    Query(isquery) {
      if (isquery === true) {
        this.QueryForm.page = 1
      }
      this.Loading = true;
      this.$post(this.$api + '/get_iccid_pagelist', this.QueryForm)
          .then((res) => {
            this.Loading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          })
    },
    exceldown() {
      this.$downloadpost(this.$api + '/down_get_iccid_pagelist', this.QueryForm, true)
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query()
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query()
    },
  }
}
</script>
